import Vue from 'vue'
import VueRouter from 'vue-router'
import app from './App.vue'
import router from './router.js'
import axios from 'axios'
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'
import { Header, Swipe, SwipeItem,Loadmore,Button,Popup,TabContainer, TabContainerItem,Switch,Picker } from 'mint-ui'
import moment from 'moment'//日期格式化
import VuePreview from 'vue-preview'//缩略图
import { Lazyload } from 'mint-ui'//图片懒加载
import Vuex from 'vuex'

Vue.use(VueRouter);
Vue.use(Lazyload);
Vue.use(VuePreview);
Vue.use(Vuex);

//以下注册的组件不用了可以去掉
Vue.component(Loadmore.name, Loadmore);
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
Vue.component(Switch.name, Switch);
Vue.component(Picker.name, Picker);

// 引入视频播放组件
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

//根路径
axios.defaults.baseURL = "http://localhost:3000/"
Vue.prototype.$ajax = axios;

//全局过滤器
Vue.filter("datefmt", function (str, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(str).format(pattern);
});

let store = new Vuex.Store({
  state: {
    userInfo: [],
    cars: [],
    ids: []
  },
  mutations: {
    // 用户信息初始化
    initUserInfo(state, userInfo) {
      state.userInfo.push(userInfo);
    },
    exitUserInfo(state,obj) {
      state.userInfo.some((item,i) => {
        if (item.u_id == obj.id) {
          state.userInfo.splice(i, 1);
          return true;
        }
      })
    },
    // 把商品添加到购物车的方法
    addToCars(state, goodsinfo) {
      let flag = false;
      // c_p_id,c_num,c_u_id,p_img,p_name,p_price,c_selected
      state.cars.some(item => {
        if (item.c_p_id === goodsinfo.c_p_id) {
          flag = true;
          item.c_num += parseInt(goodsinfo.c_num);
          return true;
        }
      })
      if (!flag) {
        state.cars.push(goodsinfo);
      }
      // 把购物车储存到本地
      localStorage.setItem("cars", JSON.stringify(state.cars));
    },
    // 初始化stete里面的cars，让页面已加载就有数据库的数据
    carsInit(state, cs) {
      state.cars = cs;
    },
    delGoods(state, id) {
      state.cars.some((item,i) => {
        if (item.c_p_id == id) {
          state.cars.splice(i, 1);
          return true;
        }
      })
      localStorage.setItem("cars", JSON.stringify(state.cars));
    },
    updateSelected(state, obj) {
      state.cars.some((item) => {
        if (item.c_p_id == obj.id) {
          item.c_selected = obj.val;
          return true;
        }
      })
      localStorage.setItem("cars", JSON.stringify(state.cars));
    },
    updateNum(state, obj) {
      state.cars.some((item) => {
        if (item.c_p_id == obj.id) {
          item.c_num = parseInt(obj.val);
          return true;
        }
      })
      localStorage.setItem("cars", JSON.stringify(state.cars));
    },
    // 初始化ids数组
    idsInit(state,obj) {
      state.ids = obj;
    }
  },
  getters: {
    // 获取用户信息
    getUserInfo(state) {
      return state.userInfo;
    },
    // 计算购物车数量
    getAllNum(state) {
      let c = 0;
      state.cars.forEach(item => {
        c += parseInt(item.c_num);
      });
      return c;
    },
    // 计算总价
    getTotalPrice(state) {
      let obj = {
        num: 0,
        val:0
      }
      state.cars.forEach(item => {
        if (item.c_selected && item.c_status) {
          // 根于商品id查价格
          
          obj.num += parseInt(item.c_num);
          obj.val += parseFloat(item.p_price) * parseInt(item.c_num);
        }
      })
      return obj;
    }
  },
  actions: {
    
  }
})

let vm = new Vue({
  el:"#app",
  data:{
      msg:'hello world'
  },
  render:c => c(app),
  router,//挂在路由
  store,
  methods: {
    getCs() {
      let ids = [];
      this.$ajax({
        url: "before/shopcar",
        method:"get"
      }).then(resp => {
        resp.data.message.forEach(item => {
          ids.push(item.c_p_id);
          if (item.c_selected == 1) {
            item.c_selected = true;
          } else {
            item.c_selected = false;
          }
          if (item.c_status == 1) {
            item.c_status = true;
          } else {
            item.c_status = false;
          }
        })
        // c_p_id,c_num,c_u_id,p_img,p_name,p_price,c_selected
        this.$store.commit("carsInit", resp.data.message);
        // 给ids赋值
        this.$store.commit("idsInit", ids);
        // 同时储存到本地
        localStorage.setItem("cars", JSON.stringify(this.$store.state.cars));
      })
    }
  },
  created() {
    this.getCs();
  }
});